<template>
	<view class="wrap">
		<view style="
		    position: relative;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    padding: 3px;
		    background-color: #fff;
		    margin-bottom: 20rpx;
		  ">
			<view>{{ title }}</view>

			<view style="position: absolute; right: 20rpx">
				<rudon-rowMenuDotDotDot :localdata="options" @change="menuAction($event)">
					<image style="width: 40rpx; height: 40rpx" src="../../static/index/Frame.png" mode=""></image>
				</rudon-rowMenuDotDotDot>
			</view>
		</view>
		<view class="content">
			<view v-if="topIndex == 1">
				<people />
			</view>
			<view v-if="topIndex == 2">
				<event />
			</view>
			<view v-if="topIndex == 3">
				<rule />
			</view>
			<view v-if="topIndex == 4">
				<plaint />
			</view>
			<view v-if="topIndex == 5">
				<result />
			</view>
		</view>
	</view>
</template>

<script>
	import people from './fenxipage/people.vue';
	import event from './fenxipage/event.vue';
	import rule from './fenxipage/rule.vue';
	import plaint from './fenxipage/plaint.vue';
	import result from './fenxipage/result.vue';
	export default {
		components: {
			people,
			event,
			rule,
			plaint,
			result
		},
		data() {
			return {
				title: "人物关系",
				topIndex: 1,
				options: [{
						value: 1,
						text: "人物关系",
					},
					{
						value: 2,
						text: "事件关系",
					},
					{
						value: 3,
						text: "引用法规",
					},
					{
						value: 4,
						text: "诉状",
					},
					{
						value: 5,
						text: "宣判结果",
					},
					{
						value: 6,
						text: "取消",
					},
				],
			}
		},
		methods: {
			menuAction(action) {
				if (action == "" || action == 6) return;
				this.topIndex = action;
				this.title = this.options[action - 1].text;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;

		.content {
			height: calc(100vh - 160px);
			overflow-y: scroll;
		}
	}
</style>